<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>bootstrap - 增删改查</title>
    <script src="./js/jquery.jsjquery.js"></script>
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="./js/bootstrap.min.js"></script>
</head>
<body>
    <!-- 表格 -->
    <div class="container" style="padding-top: 40px;">
        <div class="form-group">
            <div class="row">
                <div class="col-md-8">
                    <input type="text" class="form-control swich" />
                </div>
                <div class="col-md-3">
                    <button class="btn btn-danger sreach">搜索</button>
                    <button class="btn btn-default add" data-toggle="modal" data-target="#myModel">增加</button>
                </div>
            </div>
        </div>
        <table class="table table-bordered text-center">
            <tr>
                <td>编号</td>
                <td>书籍名称</td>
                <td>作者</td>
                <td>出版时间</td>
                <td>价格</td>
                <td>书籍类型</td>
                <td>操作</td>
            </tr>
            <tbody id="showMessage">

            </tbody>
        </table>
    </div>
    <!-- 修改的模态框 -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel">修改信息</h4>
                </div>
                <div class="modal-body">
                    <form>
                        <div class="form-group">
                            <input type="text" placeholder="编号" id="id" class="form-control" disabled/>
                        </div>
                        <div class="form-group">
                            <input type="text" placeholder="书籍名称" id="book_name" class="form-control" />
                        </div>
                        <div class="form-group">
                            <input type="text" placeholder="作者" id="author" class="form-control" id="rescore" />
                        </div>
                        <div class="form-group">
                            <input type="date" placeholder="出版日期" id="publicationdate" class="form-control" id="rescore" />
                        </div>
                        <div class="form-group">
                            <input type="text" placeholder="价格" id="price" class="form-control" id="rescore" />
                        </div>
                    </form>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary olk" data-dismiss="modal">提交更改</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal -->
    </div>
    <!-- 增加的模态框 -->
    <div class="modal fade" id="myModel" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel">增加信息</h4>
                </div>
                <div class="modal-body">
                    <form>
                        <div class="form-group">
                            <input type="text" placeholder="编号" id="ids" class="form-control" disabled/>
                        </div>
                        <div class="form-group">
                            <input type="text" placeholder="书籍名称" id="book_names" class="form-control" />
                        </div>
                        <div class="form-group">
                            <input type="text" placeholder="作者" id="authors" class="form-control" id="rescore" />
                        </div>
                        <div class="form-group">
                            <input type="date" placeholder="出版日期" id="publicationdates" class="form-control" id="rescore" />
                        </div>
                        <div class="form-group">
                            <input type="text" placeholder="价格" id="prices" class="form-control" id="rescore" />
                        </div>
                    </form>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary aad" data-dismiss="modal">增加信息</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal -->
    </div>
    <script>
        
        $(function(){
            var book_name = "";
            var author = "";
            onleadOk(book_name,author);
        })
        //页面加载
        function onleadOk(book_name,author){
            $.ajax({
                url:'http://localhost:24080/springMvcDay5/books',
                type:'get',
                data:{
                    book_name:book_name,
                    author:author
                },
                dataType:'json',
                success:function(data){
                    console.log(data)
                    var tbody = $('#showMessage');
                    tbody.empty(); // 清空现有的表格内容
                    data.forEach(function(book) {
                        var row = `<tr>
                                <td>${book.id}</td>
                                <td>${book.book_name}</td>
                                <td>${book.author}</td>
                                <td>${book.publicationdate}</td>
                                <td>${book.price}</td>
                                <td>${book.categoryList.name}</td>
                                <td>
                                    <button class="btn btn-primary rev" data-toggle="modal" data-target="#myModal" onclick="updateBook(${book.id})">修改</button>
                                    <button class="btn btn-danger del" onclick="deleteUser(${book.id})">删除</button>
                                </td>
                            </tr>
                        `;
                        tbody.append(row);
                    });
                }
            })
        }
        //删除的功能
        $(document).on("click", ".del", function () {
            $(this).parents("tr").remove()
        })
        function deleteUser(id){
            alert(id)
            $.ajax({
                url:'http://localhost:24080/springMvcDay5/books/'+id,
                type:'Delete',
                success:function(data){
                        console.log(data)
                        alert(data);
                        onleadOk("", ""); // 刷新列表
                }
            })
        }
        //改的功能
        let book = {}
        function updateBook(id) {
            $("#id").val(id);
            alert(id);
            $.ajax({
                url:"http://localhost:24080/springMvcDay5/books/"+id,
                type:"get",
                contentType: 'application/json',
                success: function(data){
                    console.log(data)
                    $("#id").val(data.id);
                    $("#book_name").val(data.book_name);
                    $("#author").val(data.author);
                    $("#publicationdate").val(data.publicationdate);
                    $("#price").val(data.price);
                    book = JSON.stringify(data);
                }
            })
            
        }
        
      //JSON.parse(string) ：接受一个 JSON 字符串并将其转换成一个 JavaScript 对象。

      //JSON.stringify(obj) ：接受一个 JavaScript 对象并将其转换为一个 JSON 字符串。

        $(document).on("click", ".olk", function () {
            console.log(book);
            book = JSON.parse(book);
            book.book_name = $("#book_name").val();
            book.author = $("#author").val();
            book.publicationdate = $("#publicationdate").val();
            book.price = $("#price").val();

            $.ajax({
                url: 'http://localhost:24080/springMvcDay5/books',
                type: 'put',
                contentType: 'application/json', // 设置Content-Type
                data: JSON.stringify(book), // 发送JSON格式的数据
                success: function(data) {
                    console.log(data);
                    if (data === 1) {
                        alert('修改成功');
                        onleadOk("", ""); // 刷新列表
                    }
                }
            });
        })
        //增加的功能
        // 在点击增加按钮时处理数据并发送
        $(document).on("click", ".aad", function () {
            let book_name = $("#book_names").val();
            let author = $("#authors").val();
            let publicationdate = $("#publicationdates").val();
            let price = $("#prices").val();
            let category_id = 1
        
            const books = {book_name,author,publicationdate,price,category_id};

            // 使用JSON.stringify来确保发送的是一个JSON字符串
            $.ajax({
                url: 'http://localhost:24080/springMvcDay5/books',
                type: 'post',
                contentType: 'application/json', // 设置Content-Type
                data: JSON.stringify(books), // 发送JSON格式的数据
                success: function (data) {
                    console.log(data);
                    alert('新增成功！')
                        onleadOk("", ""); // 刷新列表
                }
            });
            //清除表单数据
            $("#myModel").find("input").each(function(){
                $(this).val("");
            })

        });
        //查的功能
        $(".sreach").click(function () {
            var name = "";
            var sex = "";
            var oS = $(".swich").val()
            if (oS.length == 0) {
                onleadOk("","")
            } else if ($("table tr td:contains('" + oS + "')").length == 0) {
                alert("找不到数据")
            } else {
                $(".table tr:not(:first)").hide()
                // $(".table tr:contains('" + oS + "')").show().find("input").prop("checked", true)
                name = oS;
                onleadOk(name,sex)
                alert(name,sex)
            }

        })
    </script>
</body>
</html>
